import React from "react";
import "./record-detail.scss";
import Detail from "./detail-component/Detail";
import {Button, Modal,  Tabs} from "antd";
import RecordProcessHistory from "./record_process_history/RecordProcessHistory";

function RecordDetail(props) {
    const {TabPane} = Tabs;

    const recordTask = props["recordTask"];
    const recordProcessHistoryArr = props["recordProcessHistoryArr"];
    const modalVisible = props["modalVisible"];
    const handleModalOk = props["onOk"];
    const handleModalCancel = props["onCancel"];
    const auditRecordArr = props["auditRecordArr"];

    const operation = <Button type={"link"}>查看上一次更改</Button>;

    const callback = (key) => {
        console.log(key);
    }

    return (
        <div>
            <Modal
                style={{top: "20px"}}
                className={"modal"}
                title="信息详情"
                visible={modalVisible}
                onOk={handleModalOk}
                onCancel={handleModalCancel}
                width={1200}
                footer={
                    <div className="detail-modal-footer">
                        <Button type={"primary"} onClick={handleModalCancel} size={"small"}>关闭</Button>
                    </div>
                }
                bodyStyle={{overflowY: "scroll", overflowX: "scroll", height: "750px"}}
            >
                <Tabs onChange={callback} type="card" tabBarExtraContent={operation}>
                    <TabPane tab="基本信息" key="1">
                        <span>
                            流水号：{recordTask?.sno === "" || recordTask?.sno === null ?
                            "null" : recordTask?.sno}
                        </span>

                        <Detail recordTask={recordTask}/>
                    </TabPane>

                    <TabPane tab="流程履历" key="2">
                        <RecordProcessHistory recordTaskSno={recordTask?.sno}
                                              recordProcessHistoryArr={recordProcessHistoryArr}
                                              auditRecordArr={auditRecordArr}
                        />
                    </TabPane>
                </Tabs>
            </Modal>
        </div>
    )
}

export default RecordDetail;